<template>
    <div class="app-container">
      <el-table :data="list" border style="width: 100%">
        <el-table-column prop="date" label="Date" />
        <el-table-column prop="name" label="Doctor Name" />
        <el-table-column prop="specialty" label="Specialty" />
        <el-table-column prop="startTime" label="Start Time" />
        <el-table-column prop="endTime" label="End Time" />
        <el-table-column fixed="right" label="Operations" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
          </template>
        </el-table-column>
        <h1>###################</h1>
      </el-table>
  
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
  
      <!-- Add/Edit Form Dialog -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="Doctor">
            <el-select v-model="form.doctorId" placeholder="Select a doctor">
              <el-option v-for="doctor in doctors" :key="doctor.doctorId" :label="doctor.name" :value="doctor.doctorId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Date">
            <el-date-picker v-model="form.date" type="date" placeholder="Pick a day"></el-date-picker>
          </el-form-item>
          <el-form-item label="Time Range">
            <el-time-picker is-range v-model="timeRange" range-separator="-" start-placeholder="Start time" end-placeholder="End time"></el-time-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="handleSubmit">Confirm</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { fetchList, createSchedule, updateSchedule, deleteSchedule } from '@/api/schedule/schedule.js'
//   import { fetchDoctors } from '@/api/doctor'
  
  export default {
    data() {
      return {
        list: [],
        total: 0,
        listQuery: {
          pageNum: 1,
          pageSize: 20
        },
        dialogFormVisible: false,
        dialogTitle: '',
        form: {
          scheduleId: undefined,
          doctorId: undefined,
          date: undefined,
          startTime: undefined,
          endTime: undefined
        },
        doctors: [],
        timeRange: []
      }
    },
    created() {
      this.getList()
      this.getDoctors()
    },
    methods: {
      getList() {
        fetchList(this.listQuery).then(response => {
          this.list = response.rows.map(item => ({
            ...item,
            name: this.doctors.find(d => d.doctorId === item.doctorId)?.name || '',
            specialty: this.doctors.find(d => d.doctorId === item.doctorId)?.specialty || ''
          }))
          this.total = response.total
        })
      },
      getDoctors() {
        fetchDoctors().then(response => {
          this.doctors = response.data
        })
      },
      handleAdd() {
        this.dialogTitle = 'Create New Schedule'
        this.form = {}
        this.timeRange = []
        this.dialogFormVisible = true
      },
      handleEdit(index, row) {
        this.dialogTitle = 'Update Schedule'
        this.form = Object.assign({}, row)
        this.timeRange = [row.startTime, row.endTime]
        this.dialogFormVisible = true
      },
      handleSubmit() {
        if (!this.form.scheduleId) {
          this.form.startTime = this.timeRange[0]
          this.form.endTime = this.timeRange[1]
          createSchedule(this.form).then(() => {
            this.dialogFormVisible = false
            this.$message.success('Created successfully')
            this.getList()
          })
        } else {
          this.form.startTime = this.timeRange[0]
          this.form.endTime = this.timeRange[1]
          updateSchedule(this.form).then(() => {
            this.dialogFormVisible = false
            this.$message.success('Updated successfully')
            this.getList()
          })
        }
      },
      handleDelete(index, row) {
        deleteSchedule(row.scheduleId).then(() => {
          this.$message.success('Deleted successfully')
          this.getList()
        })
      }
    }
  }
  </script>